<template>
  <div class="user">
    <img :src="data.data.profile.avatarUrl" alt="" class="userImg">
    <p class="userName">{{ data.data.profile.nickname }}</p>
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  computed: {
    ...mapState(['user']),
  },
  created() {
    this.data = JSON.parse(localStorage.getItem('user'));
  },
  data() {
    return {
      data: {},
    };
  },

};
</script>
<style lang="less" scoped>
.user {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  .userImg {
    margin-top: 4rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
  }

  .userName {
    font-weight: 700;
    font-size: 20px;
    margin-top: 1rem;
  }
}
</style>